<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="theme-color" content="#fafafa">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/mystyle.css">
    <script type="text/javascript" src="static/js/jquery-1.7.2.min.js"></script>

    <style type="text/css">
        .table_p {

        }

        .width40 {
            width: 40%;
        }

        .width30 {
            width: 30%;
        }

        .table_p table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;

            text-align: center;
        }

        .table_p table thead th {
            text-align: center;
            color: #61d2f7;
            font-size: 14px;
            font-weight: 600;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .table_p table tbody {
            color: #ffffff;
            font-size: 13px;
        }

        .table_p table tbody tr:nth-child(2n+1) {
            background-color: #072951;
            box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
        }

        .div_any_title .title {
            color: #00f6ff;
            font-size: 20px;
        }

        .div_any_title img {
            vertical-align: middle;
        }

        .wrapper {
            width: 100%;
            height: 93%;
            background: url("../static/img/bg01warp.png") 50% 50% no-repeat;
            background-size: 100%;
        }

        #douProductPredictionId th {
            width: 50%;
        }

        .douProductPrediction {
            height: 320px;
            overflow: hidden;
            margin-top: 10px;
        }

        .douProductPrediction td {
            height: 60px;
            width: 50%;
        }

        #douSoundWavesTopId tbody td {
            height: 50px;
        }

        #douFontTopId tbody td {
            height: 50px;
        }

        #douProductOrderId tbody td {
            height: 30px;
        }
    </style>
</head>
<body>
<div class="header">
    <h3>娱乐空间</h3>
</div>
<div class="wrapper">
    <div class="container-fluid">
        <div class="row full-h">
            <div class="col-lg-3 full-h">
                <div class="partcon h50">
                    <div class="part h100">
                        <div class="left div_table_box">
                            <div class="div_any_child" style="height: 400px;">
                                <div class="div_any_title">
                                    <div class="title"><img src="../static/img/icon04.png"/>&nbsp;今日积分榜</div>
                                </div>
                                <div class="table_p">
                                    <table style="width: 100%;" id="douSoundWavesTopId">
                                        <thead>
                                        <tr>
                                            <th>昵称</th>
                                            <th>积分</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="partcon h50">
                    <div class="part h100">
                        <div class="left div_table_box" style="width: 100%;">
                            <div class="div_any_child" style="height: 420px;">
                                <div class="div_any_title">
                                    <div class="title"><img src="../static/img/icon02.png"/>&nbsp;历史积分榜</div>
                                </div>
                                <div class="table_p">
                                    <table style="width: 100%;" id="douFontTopId">
                                        <thead>
                                        <tr>
                                            <th>昵称</th>
                                            <th>积分</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 full-h">
                <div class="partcon h100">
                    <div class="part h100">
                        <div style="width:910px;margin: 0px auto;height: 100%;">
                            <button onclick="shuaxin()">刷新</button>
                            <iframe id="product" style="height:100%;width:910px;"
                                    frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"
                                    allowtransparency="yes"></iframe>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 full-h">
                <div class="partcon h50">
                    <div class="part h100">
                        <div class="left div_table_box" style="width: 100%;">
                            <div class="div_any_child" style="height: 420px;">
                                <div class="div_any_title">
                                    <div class="title"><img src="../static/img/icon05.png"/>&nbsp;奖品</div>
                                </div>
                                <div class="table_p" id="douProductOrderId">
                                    <table style="width: 100%;">
                                        <thead>
                                        <tr>
                                            <th class="width40">名称</th>
                                            <th class="width30">所需积分</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="partcon h50">
                    <div class="part h100">
                        <div class="left div_table_box" style="width: 100%;">
                            <div class="div_any_child" style="height: 420px;">
                                <div class="div_any_title">
                                    <div class="title"><img src="../static/img/icon03.png"/>&nbsp;奖品兑换</div>
                                </div>
                                <div class="table_p">
                                    <table style="width: 100%;" id="douProductPredictionId">
                                        <thead>
                                        <tr>
                                            <th>昵称</th>
                                            <th>兑换奖品</th>
                                        </tr>
                                        </thead>
                                    </table>
                                    <div id=rolllinkk
                                         class="douProductPrediction">
                                        <div id=rolllinkk1>
                                            <table style="width: 100%;">
                                                <tbody>
                                                <tr>
                                                    <td>大疆智能云台</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台：123人次</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台：123人次</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台：123人次</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台：123人次</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台：123人次</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                <tr>
                                                    <td>大疆智能云台</td>
                                                    <td>大疆智能云台：123人次</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div id=rolllinkk2>
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">


    function initDouSoundWavesTopId() {
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:20008/douSoundWavesTopServer");
        } else {
            alert('Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("open");
        }
        var douSoundWavesTopIdRows = 1;
        websocket.onmessage = function (event) {
            var reslut = eval("(" + event.data + ")");
            for (let i = 0; i < reslut.length; i++) {
                var obj = reslut[i];
                ++douSoundWavesTopIdRows;
                var html = "<tr class='dsw" + douSoundWavesTopIdRows + "'><td class=\"td_img\"><img src=\"../static/img/country/" + obj.head_portrait + ".jpg\"></td><td>dsw" + douSoundWavesTopIdRows + "</td><td>" + obj.level + "</td><td>" + obj.id + "</td></tr>";
                $("#douSoundWavesTopId tbody").append(html);
                if (douSoundWavesTopIdRows > 8) {
                    $("#douSoundWavesTopId tbody tr").eq(0).remove();
                }
            }
        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("close");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            $('errorid').append(innerHTML);
        }

        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }

        //发送消息
        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }
    }

    function initDouFontTopId() {
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:20008/douFontTopServer");
        } else {
            alert('Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("open");
        }
        var douFontTopIdRows = 1;
        websocket.onmessage = function (event) {
            var reslut = eval("(" + event.data + ")");
            for (let i = 0; i < reslut.length; i++) {
                var obj = reslut[i];
                ++douFontTopIdRows;
                var html = "<tr class='dsw" + douFontTopIdRows + "'><td>" + obj.nickname + "</td><td>" + obj.content + "</td></tr>";
                $("#douFontTopId tbody").append(html);
                if (douFontTopIdRows > 6) {
                    $("#douFontTopId tbody tr").eq(0).remove();
                }
            }
        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("close");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            $('errorid').append(innerHTML);
        }

        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }

        //发送消息
        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }
    }


    function initDouProductOrder() {
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:20008/douProductOrderServer");
        } else {
            alert('Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("open");
        }
        var douProductOrderRows = 1;
        websocket.onmessage = function (event) {
            var reslut = eval("(" + event.data + ")");
            for (let i = 0; i < reslut.length; i++) {
                var obj = reslut[i];
                ++douProductOrderRows;
                var html = "<tr class='dsw" + douProductOrderRows + "'><td class=\"width40\">" + obj.nickname + "</td><td class=\"width30\">" + obj.city + "</td><td class=\"width30\">" + obj.quantity + "</td></tr>";
                $("#douProductOrderId tbody").append(html);
                if (douProductOrderRows > 6) {
                    $("#douProductOrderId tbody tr").eq(0).remove();
                }
            }
        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("close");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            $('errorid').append(innerHTML);
        }

        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }

        //发送消息
        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }
    }

    function shuaxin(){
      /*  var _body = window.parent;
        var _iframe1=_body.document.getElementById('product');
        _iframe1.contentWindow.location.reload(true);*/

        window.location.reload();
    }

    function initDsGamesDay() {
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:20008/initDsGamesDayServer");
        } else {
            alert('Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("open");
        }
        var douProductOrderRows = 1;
        websocket.onmessage = function (event) {

            var reslut = eval("(" + event.data + ")");
            console.log(JSON.stringify(reslut) + '-reslut---' + reslut)

          //  $('#product').attr('src', '');
            $('#product').attr('src', reslut.html_url);

            /*  for (let i = 0; i < reslut.length; i++) {
                  var obj = reslut[i];
                  ++douProductOrderRows;
                  var html = "<tr class='dsw" + douProductOrderRows + "'><td class=\"width40\">" + obj.nickname + "</td><td class=\"width30\">" + obj.city + "</td><td class=\"width30\">" + obj.quantity + "</td></tr>";
                  $("#douProductOrderId tbody").append(html);
                  if (douProductOrderRows > 6) {
                      $("#douProductOrderId tbody tr").eq(0).remove();
                  }
              }*/
          /*  shuaxin();
            $('#product').attr('src', reslut.html_url);
            document.getElementById('product').contentWindow.location.reload(true);
            $('#product').attr('src', reslut.html_url);*/
            //

           // $('#product').attr('src', $('#product').attr('src'));

        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            window.location.reload();
            setMessageInnerHTML("close");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            $('errorid').append(innerHTML);
        }

        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }

        //发送消息
        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }
    }

    $(document).ready(function () {
        //initDouProductOrder();
        initDsGamesDay();
        /*        initDouSoundWavesTopId();
                initDouFontTopId();
                initDouProductOrder();*/
    });

    var rollspeed = 30
    rolllinkk2.innerHTML = rolllinkk1.innerHTML

    function Marquee1() {
        if (rolllinkk2.offsetTop - rolllinkk.scrollTop <= 0)
            rolllinkk.scrollTop -= rolllinkk1.offsetHeight
        else {
            rolllinkk.scrollTop++
        }
    }

    var MyMar1 = setInterval(Marquee1, rollspeed)
    rolllinkk.onmouseover = function () {
        clearInterval(MyMar1)
    }
    rolllinkk.onmouseout = function () {
        MyMar1 = setInterval(Marquee1, rollspeed)
    }


</script>

</body>
</html>
